<template>
  <div id="aaa" ref="vantaRef">
    <div id="app">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";
export default {
  data() {
    return {};
  },
  mounted() {
    this.vantaEffect = BIRDS({
      // el: this.$refs.vantaRef,
      THREE: THREE,
      el: this.$refs.vantaRef,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      scale: 1.0,
      scaleMobile: 1.0,
      backgroundColor: 0xffffff,
      birdSize: 1.0,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
};
</script>

<style scoped>
#aaa {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0px;
  padding: 0px;

  border-radius: 10px;
  background-size: 100% 100%;
}
</style>